<template>
  <div class="wrap">
    <van-nav-bar
      title="我的提问"
      placeholder
      fixed
      left-arrow
      style="background: #fff"
      @click-left="toBack"
      right-text="管理"
      @click-right="onClickRight"
    />
    <div class="wrap_cont">
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
        <van-swipe-cell v-for="(item, i) in newList" :key="i">
          <van-checkbox name="c">复选框 c</van-checkbox>
          <new-card style="margin-bottom: 12px" :data="item"></new-card>
          <template #right>
            <div class="delete-button">
              <div style="text-align: center">
                <van-icon name="delete-o" size="13" />
                <span>删除提问</span>
              </div>
            </div>
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import newCard from "../../components/new-card.vue";
const toBack = () => {
  window.history.back();
};
const getImg = (name) => {
  return `/src/assets/images/${name}.png`;
};
const newList = [
  {
    name: "司徒晚景",
    zw: "市场部总监",
    tx: getImg("bgtx"),
    time: "2023-02-22 12:22",
    nr: "关于怎么提升公司公众号流量, 应提升那几方面呢?",
    nrImg: getImg("bgtx"),
    rs: "12",
    lls: "34",
    type: "1",
  },
  {
    name: "司徒晚景",
    zw: "市场部总监",
    tx: getImg("bgtx"),
    time: "2023-02-22 12:22",
    nr: "关于怎么提升公司公众号流量, 应提升那几方面呢?",
    nrImg: getImg("bgtx"),
    rs: "12",
    lls: "34",
    type: "2",
  },
];
const list = [
  {
    label: "我的提问",
    img: getImg("wd_01"),
  },
  {
    label: "我的回复",
    img: getImg("wd_03"),
  },
  {
    label: "我的关注",
    img: getImg("wd_02"),
  },
];
const checked = ref([]);
</script>

<style lang="scss" scoped>
.wrap {
  &_cont {
    margin-top: 4px;
    background: #f5f9fc;
    min-height: calc(100vh - 46px);
    padding: 10px 16px;
    ::v-deep(.van-cell) {
      height: 56px;
      justify-content: center;
    }
    ::v-deep(.van-cell__title) {
      display: flex;
      align-items: center;
    }
    .custom-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #272b2d;
      margin-left: 8px;
    }
    ::v-deep(.van-icon) {
      display: block;
    }
    ::v-deep(.delete-button) {
      height: 100%;
      width: 100%;
      background: #ffa940;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        display: block;
      }
    }
    ::v-deep(.van-swipe-cell__right) {
      right: -1px;
      width: 87px;
    }
  }
}
</style>
